<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我的银行卡</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/public.css" rel="stylesheet" />
		<link href="css/iconfont.css" rel="stylesheet" />
		<style type="text/css">
			.item:nth-of-type(1){
				margin-top: 15px;
			}
			.bg1{
				background: url(images/card1.png) no-repeat center;
				background-size: cover;
			}
			.bg2{
				background: url(images/card2.png) no-repeat center;
				background-size: cover;
			}
			.bg3{
				background: url(images/card3.png) no-repeat center;
				background-size: cover;
			}
			.bg4{
				background: url(images/card4.png) no-repeat center;
				background-size: cover;
			}
			.item{
				
				margin: 12px 10px;
				border-radius: 10px;
				display: flex;
				display: -webkit-flex;
				padding: 12px 15px;
			}
			.item>.icon{
				flex: 0 0 54px;
				-webkit-flex: 0 0 54px;
			}
			.item>.info{
				color: #FFFFFF;
			}
			.item>.info>span{
				display: block;
			}
			.item>.info .bank{
				line-height: 36px;
				margin-bottom: 10px;
			}
			.item>.info .account{
				margin-bottom:10px;
			}
			.addCard{
				font-size: 28px!important;
				font-weight: bolder;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav header">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">我的银行卡</h1>
		    <a class="mui-icon mui-icon-plusempty mui-pull-right addCard" id="addCard"></a>
		</header>
		<div class="mui-content" id="app">
			<div class="item">
				<div class="icon"><img src="images/icon5.png" alt="" width="36"/></div>
				<div class="info">
					<span class="bank f_16">中国银行</span>
					<span class="account f_20">**** **** **** **** 888</span>
					<span class="name f_14">收款人:夏天</span>
				</div>
			</div>
			<div class="item">
				<div class="icon"><img src="images/icon5.png" alt="" width="36"/></div>
				<div class="info">
					<span class="bank f_16">中国银行</span>
					<span class="account f_20">**** **** **** **** 888</span>
					<span class="name f_14">收款人:夏天</span>
				</div>
			</div>
			<div class="item">
				<div class="icon"><img src="images/icon5.png" alt="" width="36"/></div>
				<div class="info">
					<span class="bank f_16">中国银行</span>
					<span class="account f_20">**** **** **** **** 888</span>
					<span class="name f_14">收款人:夏天</span>
				</div>
			</div>
			<div class="item">
				<div class="icon"><img src="images/icon5.png" alt="" width="36"/></div>
				<div class="info">
					<span class="bank f_16">中国银行</span>
					<span class="account f_20">**** **** **** **** 888</span>
					<span class="name f_14">收款人:夏天</span>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="vue/vue.min.js"></script>
		<script type="text/javascript">
			(function($,doc){
				$.init({
					pullRefresh : {
					    container:"#app",
					    down : {
					      style:'circle',
					      color:'#ff5811', 
					      height:'50px',
					      range:'100px', 
					      offset:'0px', 
					      auto: true,
					      callback :function(){
					      	 mui('#app').pullRefresh().endPulldown();
					      }
					    }
					},
					beforeback:function(){
						setTimeout(function(){
							reset()
						},400)
					}
				});
				$.plusReady(function(){
					plus.webview.currentWebview().setStyle({
	                    scrollIndicator: 'none'
	             	});
				});
				if($.os.plus){
					//5+App环境
				}else{
					//浏览器环境
				
				}
				var addCard=doc.getElementById("addCard");
				var items=doc.getElementsByClassName("item");
				for(var i=0;i<items.length;i++){
					if(i%4==0){
						items[i].setAttribute("class","item bg1")
					}else if(i%4==1){
						items[i].setAttribute("class","item bg2")
					}else if(i%4==2){
						items[i].setAttribute("class","item bg3")
					}else{
						items[i].setAttribute("class","item bg4")
					}
				}
				addCard.addEventListener('tap',function(){
					app.openViwe("add_card.html")
				})
				function reset(){
					scrollTo(0,0,100)
				}
			}(mui,document));
		</script>
	</body>

</html>